<template>
  <el-row>
    <el-col :span="12" class="sea-card">
      <sea-request url="/sys/permit/list" :result-parser="resultParser">
        <el-card shadow="hover" slot-scope="{response, reload, loading}">
          <sea-table-title slot="header" title="权限列表">
            <sea-tips>
              <p>[操作权限]决定了在界面上能执行哪些操作；</p>
              <p>授权码会在代码中直接使用，因此一般是禁止修改的。</p>
            </sea-tips>
            <el-button type="text" @click="reload" class="pull-right"><i class="fa fa-refresh"></i> 刷新</el-button>
          </sea-table-title>
          <sea-skeleton :data="response" :loading="loading">
            <sea-editable-tree
                :options="response"
                v-show="!loading"
                name-field="label"
                :click="onClick"
                :ceate="onCreate"
                :remove="onRemove"
                :modify="onModify"></sea-editable-tree>
          </sea-skeleton>
        </el-card>
      </sea-request>
    </el-col>
    <el-col :span="12" class="sea-card">
      <el-card shadow="hover">
        <sea-table-title slot="header" title="编辑权限"></sea-table-title>
        <!--更新-->
        <smart-form ref="form_modify" method="PUT" url="/sys/permit/info"
                   :model="form_data" :on-succeed="callback">
          <smart-form-layout require name="id" label="ID">
            <smart-text-view name="id" placeholder="ID"></smart-text-view>
          </smart-form-layout>
          <smart-form-layout require name="authorityCode" label="授权码">
            <smart-text-view name="authorityCode" placeholder="授权码"></smart-text-view>
          </smart-form-layout>
          <smart-form-layout require name="type" label="权限类型">
            <smart-text-view name="type" placeholder="权限类型"></smart-text-view>
          </smart-form-layout>
          <smart-form-layout require name="label" label="标签">
            <smart-text-view name="label" placeholder="标签"></smart-text-view>
          </smart-form-layout>
          <smart-form-layout require name="description" label="描述">
            <smart-text-view name="description" placeholder="描述"></smart-text-view>
          </smart-form-layout>
        </smart-form>

      </el-card>
    </el-col>
  </el-row>
</template>

<script>


export default {
    components: {},
    data() {
        return {
            //当前操作的数据
            row_data: undefined
            // form-data start 表单数据对象模型
            , form_data: [
                {
                    name: 'id', label: 'ID', value: ''
                    , rules: [
                        {required: true, message: '[ID]字段不允许为空 ', trigger: 'blur'},
                        {min: 0, max: 32, message: '最多32字符', trigger: 'blur'}
                    ]
                },
                {
                    name: 'path', label: '层级路径', value: ''
                    , rules: [
                        {required: true, message: '[层级路径]字段不允许为空 ', trigger: 'blur'},
                        {min: 0, max: 32, message: '最多32字符', trigger: 'blur'}
                    ]
                },
                {
                    name: 'pid', label: '父级ID', value: ''
                    , rules: [
                        {required: true, message: '[父级ID]字段不允许为空 ', trigger: 'blur'},
                        {min: 0, max: 32, message: '最多32字符', trigger: 'blur'}
                    ]
                },
                {
                    name: 'level', label: '层级', value: ''
                },
                {
                    name: 'authorityCode', label: '授权码', value: ''
                    , rules: [
                        {required: true, message: '[授权码]字段不允许为空 ', trigger: 'blur'},
                        {min: 0, max: 32, message: '最多32字符', trigger: 'blur'}
                    ]
                },
                {
                    name: 'type', label: '权限类型', value: ''
                },
                {
                    name: 'label', label: '标签', value: ''
                    , rules: [
                        {required: true, message: '[标签]字段不允许为空 ', trigger: 'blur'},
                        {min: 0, max: 255, message: '最多255字符', trigger: 'blur'}
                    ]
                },
                {
                    name: 'description', label: '描述', value: ''
                    , rules: [
                        {required: true, message: '[描述]字段不允许为空 ', trigger: 'blur'},
                        {min: 0, max: 255, message: '最多255字符', trigger: 'blur'}
                    ]
                },
            ]
            // form-data end
        }
    },
    methods: {
        /**
         * 查询结果转换为树形结构
         */
        resultParser: function (list) {
            if (this.$layers.isNotEmpty(list)) {
                this.row_data = list[0];
            }
            return this.$bamboo.toTree(list);
        },
        /**
         * 新增/编辑操作成功
         *
         * @param ret 后台响应数据
         * @param data 表单数据
         */
        callback: function (ret, data) {
            if (ret.code === 0) {
                this.$layers.copy(data, this.row_data);
                this.$layers.succeed('操作成功！');
            }
        },
        /**
         * 新增节点
         * @param node 节点
         * @param data 数据
         * @returns {Promise<*>}
         */
        onCreate: async function (data, node) {
            return new Promise(resolve => {
                this.$layers.ajax({
                    url: '/sys/permit/info',
                    method: 'POST',
                    params: {pid: data.id}
                }).then(ret => {
                    if (ret.code === 0) {
                        let node = this.$bamboo.wrapObject(ret.data);
                        resolve(node);
                    }
                })
            });
        },
        /**
         * 移除节点
         * @param node 节点
         * @param data 数据
         * @returns {Promise<*>}
         */
        onRemove: async function (data, node) {
            return new Promise(resolve => {
                this.$layers.delete({
                    url: '/sys/permit/info',
                    method: 'DELETE',
                    params: {id: data.id}
                }).then(ret => {
                    if (ret.code === 0) {
                        resolve();
                    }
                })
            });
        },
        /**
         * 点击事件
         * @param node 节点
         * @param data 数据
         * @returns {Promise<*>}
         */
        onClick: function (data, node) {
            this.row_data = data;
            this.$refs.form_modify.val(data.data);
        },
        /**
         * 更新
         * @param node 节点
         * @param data 数据
         * @returns {Promise<*>}
         */
        onModify: async function (data, node) {
            this.row_data = data;
        }
    }
};
</script>
